<template>
	<view class="content-box">
		<u-navbar id="navbar" :background="'rgba(41,41,41,0)'" :backIconColor="'rgba(255,255,255,1)'"
			:border-bottom="false" :immersive="true"></u-navbar>
		<view class="container">
			<!-- <video  
			      id="video"  
			      :src="videoUrl"
			      autoplay  
			      controls  
			      object-fit="fill"  
			      @play="onPlay"  
			      
				   @ended="onEnded"
			    ></video> -->
				<video id="video" :src="videoUrl" style="height: 400rpx; width: 100%;"  :object-fit="fill" :show-mute-btn="true" autoplay show-play-btn :controls="true"></video>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				videoUrl: '',
				videoContexts: {},
			}
		},
		mounted() {  
			this.videoContexts['video'] = wx.createVideoContext('video');  
		},
		onLoad() {
			const options = this.$Route.query;
			console.log("-------------------optionsoptions--------------",options);
			if (options.videoUrl) {
			  this.videoUrl = decodeURIComponent(options.videoUrl); // 解码URL参数，以防有特殊字符  
			} else {  
			  console.error('未获取到视频地址');  
			}  
			// 页面加载完成后尝试自动全屏播放（注意：这可能会受到微信小程序策略的限制）  
			// this.$nextTick(() => {  
			//   this.tryFullScreen();  
			// }); 
		},
		methods: {
			onPlay() {
			  console.log('视频开始播放');  
			},
			onEnded(){
				this.$Router.push({
					path: '/bundle/pages/goods_data/goods_data',
				})
			},
			onFullscreenChange() {
			  const video = this.$refs.video;  
			  if (video && wx.createSelectorQuery) {  
			    wx.createSelectorQuery().select('#video').boundingClientRect(rect => {  
			      if (rect.width === window.innerWidth && rect.height === window.innerHeight) {  
			        console.log('视频已全屏');  
			      } else {  
			        console.log('视频未全屏');  
			      }  
			    }).exec();  
			  }  
			},  
			tryFullScreen() {
				// 获取视频上下文并请求全屏播放  
			  const videoContext = this.videoContexts['video'];  
			  
			  console.log('=========tryFullScreen==========');
			  console.log(videoContext);
			  
			  if (videoContext) {  
				videoContext.play(); // 先播放视频（可能需要根据微信小程序的规则调整）  
				videoContext.requestFullScreen({  
				  direction: 0, // 0为竖屏，90为横屏  
				  success() {  
					console.log('全屏成功');  
				  },  
				  fail() {  
					console.error('全屏失败');  
				  }  
				});  
			  }  
				
				
				
			  // const video = this.$refs.video;
			  // console.log('=======video===============');
			  // console.log(video);
			  // if (video && video.requestFullscreen) {
			  //   video.requestFullscreen().catch(err => {  
			  //     console.error('全屏播放失败:', err);  
			  //     // 如果全屏失败，可以尝试模拟用户点击视频元素来触发全屏（但通常不推荐，且可能无效）  
			  //     // setTimeout(() => {  
			  //     //   video.click(); // 这通常不会工作，因为微信小程序的视频全屏需要用户交互  
			  //     // }, 100);  
			  //   });  
			  // } else {  
			  //   console.warn('当前环境不支持全屏API');  
			  // }  
			  // 注意：由于微信小程序的安全策略，直接调用全屏API可能会失败，需要用户交互来触发全屏  
			}  
		},
	}
</script>

<style lang="scss">
@import '@/styles/base.scss';
.content-box {
	height: 100vh;
	background-color: #292929;
	color: $-color-white;
	padding: 180rpx 20rpx;
	.container{
		margin-top: 20vh;
	}
}
</style>
